<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="dashboard/header :: header"></head>
<body>

<!--
@desc  添加
@author LuoAnDong
@since 2019-05-18 23:04:49
-->
	<div layout:fragment="content">
		<div class="container-fluid content-main">
			<div class="animated fadeIn">
				<div class="row">
					<!-- /.col-->
					<div class="col-sm-12">
						<div class="card">
							<div class="card-body">

								<form class="form-horizontal" id="addForm" style="float:left;width:100%">
								
									<input type="hidden" name="formToken" th:value="${session.formToken}" />

<div class="form-group row margin-right-0">
	<label class="col-md-2 col-form-label" for="text-input">图片名称</label>
	<div class="col-md-10">
		<input class="form-control" id="imagesName" type="text" name="imagesName" placeholder="图片名称">
	</div>
</div>
<div class="form-group row margin-right-0">
	<label class="col-md-2 col-form-label" for="text-input">文件地址</label>
	<div class="col-md-10">
		<!-- 
		<input class="form-control" id="imagesPath" type="text" name="imagesPath" placeholder="文件地址">
		-->
		
		<input type="file" name="file" multiple="multiple" onchange="preview(this)" class="form-control-file" id="exampleFormControlFile1">
		<div id="preview">
			<img style="width: 80px; height: 80px; margin-top: 10px; border-radius: 5px;" src="">	
		</div>
	</div>
</div>
<div class="form-group row margin-right-0">
	<label class="col-md-2 col-form-label" for="text-input">海报描述</label>
	<div class="col-md-10">
		<textarea class="form-control" id="textarea-input" name="imagesDesc" rows="9" placeholder="海报描述"></textarea>
	</div>
</div>
<div class="form-group row margin-right-0">
	<label class="col-md-2 col-form-label" for="text-input">图片类型</label>
	<div class="col-md-10">
		<input class="form-control" id="imagesType" type="text" name="imagesType" placeholder="图片类型">
	</div>
</div>
							
								</form>
							</div>

							<div class="card-footer">
								<button class="btn btn-primary" style="float:right" onclick="save()" type="button">保存</button>
							</div>

						</div>
					</div>
					<!-- /.col-->
				</div>
			</div>
		</div>

	</div>

	<script th:src="@{/asserts/vendors/jquery/js/jquery.min.js}"></script>
	<script th:src="@{/asserts/vendors/jquery.form/jquery.form.min.js}"></script>

	<script th:src="@{/asserts/vendors/layer/layer.js}"></script>
	<script th:src="@{/asserts/js/global.js}"></script>

	<script type="text/javascript">
	
		// 保存操作
		function save() {
			console.log('save');
			$("#addForm").ajaxSubmit({
				url : ctx+"portal/desktop/web/uploadImages/save",
				type : "POST",
				headers : {
					'Content-Type' : 'application/x-www-form-urlencoded'
				},
				success : function(data) {
					if (data.code == 200) {
						layer.msg("操作成功!");
					} else {
						layer.alert(data.message);
					}
				}
			});
		}
	
		function preview(file) {
			var prevDiv = document.getElementById('preview');
			if (file.files && file.files[0]) {
				var reader = new FileReader();
				reader.onload = function(evt) {
					prevDiv.innerHTML = '<img style="width: 80px; height: 80px; margin-top: 10px; border-radius: 5px;" src="' + evt.target.result + '" />';
				}
				reader.readAsDataURL(file.files[0]);
			} else {
				prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
			}
		}
		
	</script>

</body>
</html>

